<!--
 * @Author: ChunLai
 * @Date: 2022-03-29 08:32:45
 * @LastEditTime: 2025-11-21 14:34:51
 * @Description: 公共弹出框
 * @FilePath: \01.latest-short-insure\src\components\PopCommon.vue
-->
<template>
  <van-popup
    v-model="show"
    overlay-class="lay1_shark"
    position="bottom"
    :style="{ height: popHeight }"
    z-index="1000"
    round
    closeable
    :close-on-click-overlay="false"
    @click-overlay="closePop"
    @click-close-icon="closePop"
  >
    <div class="pop-box">
      <div class="pop-title">
        {{ popTitle }}
      </div>
      <div class="pop-main">
        <div class="pop-content">
          <slot name="content"></slot>
        </div>
      </div>
    </div>
  </van-popup>
</template>

<script>
export default {
  name: "PopCommon",
  props: {
    popShow: {
      type: Boolean,
      default: false,
    },
    popHeight: {
      type: String,
      default: "80%",
    },
    popTitle: {
      type: String,
      default: "保费测算",
    },
  },
  computed: {
    show: {
      get: function () {
        return this.popShow;
      },
      set: function (value) {
        console.log(value);
        // if (!value) {
        //   this.$emit("callback")
        // }
      },
    },
  },
  methods: {
    closePop() {
      this.$emit("callback", false);
    },
  },
};
</script>

<style lang="less" scoped>
.pop-box {
  width: 100%;
  height: 100%;

  .pop-title {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50px;
    line-height: 1;
    font-size: 16px;
    font-weight: 600;
    font-family: MiSans;
    letter-spacing: 2px;
    position: relative;
    &::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      border-bottom: 1px solid #ededed;
      transform: scaleY(0.5);
    }
  }

  .pop-main {
    width: 100%;
    height: calc(100% - 60px);
    overflow: scroll;

    .pop-content {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
